<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">场所设备</small>
      </a>
      <a class="operation" v-on:click="show = !show" v-show="operation">
        <i class="el-icon-setting"></i> 操作
      </a>
      <a href="javascript:;" class="save" v-show="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <a @click="update()">修改</a>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span><em></em>经营场所面积</span>
            <div class="froms">
              <input v-model="listData.operatingArea" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span><em>*</em>厨房面积</span>
            <div class="froms">
              <input v-model="listData.kitchenArea" :disabled="forbidden" name="kitchenArea" v-validate="'required|numeric'" :class="{'is-danger': errors.has('kitchenArea')}">
            </div>
          </li>
          <li>
            <span><em>*</em>就餐场所面积</span>
            <div class="froms">
              <input v-model="listData.diningArea" :disabled="forbidden" name="diningArea" v-validate="'required'" :class="{'is-danger': errors.has('diningArea')}">
            </div>
          </li>
          <li>
            <span><em>*</em>仓库库存面积</span>
            <div class="froms">
              <input v-model="listData.warehouseArea" :disabled="forbidden" name="warehouseArea" v-validate="'required'" :class="{'is-danger': errors.has('warehouseArea')}">
            </div>
          </li>
          <li>
            <span><em></em>冻品仓库数量</span>
            <div class="froms">
              <input v-model="listData.frozenGoodsNum" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span><em>*</em>其他仓库数量</span>
            <div class="froms">
              <input v-model="listData.otherGoodsWNum" :disabled="forbidden" name="otherGoodsWNum" v-validate="'required'" :class="{'is-danger': errors.has('otherGoodsWNum')}">
            </div>
          </li>
        </ul>
        <div class="filemain">
          <app-upload :uploadmsg="imgData.uploadmsg" :getuniddata="imgData.getuniddata" :UserUnid="imgData.UserUnid" :AliasData="imgData.AliasData" :AliasDataSort="imgData.AliasDataSort" :no="imgData.no"></app-upload>
        </div>
        <div class="equipmentbox">
          <i class="el-icon-document"></i>消毒设备信息
          <div class="img-btnbox">
            <div class="showclick">
              <input type="button" accept="image" @click="appendequipment" :disabled="forbidden">
            </div>
          </div>
          <ul v-for="(equipment, index) in disinfect" :index="this.index" class="files">
            <li><span>顺序</span><input v-model="equipment.serialNumber" placeholder="顺序" :disabled="forbidden"></li>
            <li><span>品名</span><input v-model="equipment.deviedName" placeholder="品名" :disabled="forbidden"></li>
            <li><span>数量</span><input v-model="equipment.aMount" placeholder="数量" :disabled="forbidden"></li>
            <p class="f_r">
              <el-button type="primary" icon="delete2" class="c_f" size="mini" @click="deleteSkill(index)" :disabled="forbidden">删除</el-button>
            </p>
          </ul>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  import AppUpload from '@/components/upload'
  /*附件*/
  import {
    GetGuid,
    UploadSingleFile,
    FileData,
    DeleteFile
  } from '../../../api/api';
  import {
    PlaceLayoutDetail,
    PlaceLayoutUpdate,
    PlaceLayoutDelete,
    PlaceLayoutGetlist
  } from '../../../api/api';
  import {
    Popup
  } from 'mint-ui';
  var moment = require('moment');
  import Exif from 'exif-js';
  export default {
    components: {
      'mt-popup': Popup,
      'app-upload': AppUpload,
    },
    data() {
      return {
        show: false, //默认隐藏
        operation: true,
        save: false,
        forbidden: true,
        equipmentdetail: {},
        getlistdetail: {},
        enterpriseUnid: this.$route.query.enterpriseUnid,
        //表单
        listData: {
          operatingArea: '',
          kitchenArea: '',
          diningArea: '',
          warehouseArea: '',
          frozenGoodsNum: '',
          otherGoodsWNum: '',
        },
        count: 2,
        disinfect: [{
          serialNumber: '',
          deviedName: '',
          aMount: ''
        }],
        //上传图片
        headerImage: '',
        picValue: '',
        //unidoption:'',
        FileDatalist: [],
        imgData: {
          uploadmsg: '场所布局图信息',
          getuniddata: this.$route.query.unid,
          UserUnid: '',
          AliasData: '',
          AliasDataSort: '',
          no: false,
        },
      };
    },
    methods: {
      update: function() {
        this.operation = false,
          this.save = true,
          this.show = false,
          this.forbidden = false,
          this.imgData.no = true
      },
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数： unid    
        let options = {
          params: {
            id: this.$route.query.unid,
          }
        }
        let getlist = {
          params: {
            enterpriseUnid: this.enterpriseUnid
          }
        }
        //调取接口
        PlaceLayoutGetlist(getlist).then((res) => {
          if (res.success === true) {
            this.getlistdetail = res.data;
            this.disinfect = this.getlistdetail
          }
        })
        PlaceLayoutDetail(options).then((res) => {
          if (res.success === true) {
            this.equipmentdetail = res.data;
            this.listData.operatingArea = this.equipmentdetail.operatingArea,
              this.listData.kitchenArea = this.equipmentdetail.kitchenArea,
              this.listData.diningArea = this.equipmentdetail.diningArea,
              this.listData.warehouseArea = this.equipmentdetail.warehouseArea,
              this.listData.frozenGoodsNum = this.equipmentdetail.frozenGoodsNum,
              this.listData.otherGoodsWNum = this.equipmentdetail.otherGoodsWNum
          }
        })
      },
      //删除方法
      handleDelete() {
        let deletParams = {
          params: {
            unids: this.$route.query.unid,
          }
        }
        this.$confirm('是否删除此条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          PlaceLayoutDelete(deletParams).then(() => {
            this.getData();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.$router.go(-1);
          });
        });
      },
      /*********************附件方法开始*********************/
      getunid: function() {
        this.imgData.UserUnid = JSON.parse(localStorage.getItem('auth')).UserUnid;
        GetGuid().then((res) => {
          if (res.success === true) {
            //  this.imgData.getuniddata = res.data;
          }
        })
      },
      //添加
      appendequipment: function(index) {
        this.disinfect.push({
          serialNumber: '',
          deviedName: '',
          aMount: '',
        })
        this.count += 1
      },
      //删除
      deleteSkill(index) {
        if (index == 0 && this.count == 0) {
          this.$message.error('至少添加一个设备');
        } else {
          this.disinfect.splice(index, 1);
          this.count -= 1
          console.log(this.count)
        }
      },
      /*********************附件方法结束*********************/
      //修改方法
      submitForm: function() {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let varEnterprise = {
              Unid: JSON.parse(localStorage.getItem('auth')).enterpriseUnid
            }
            let data = {
              Unid: this.$route.query.unid,
              Enterprise: varEnterprise,
              OperatingArea: this.listData.operatingArea,
              KitchenArea: this.listData.kitchenArea,
              DiningArea: this.listData.diningArea,
              WarehouseArea: this.listData.warehouseArea,
              FrozenGoodsNum: this.listData.frozenGoodsNum,
              OtherGoodsWNum: this.listData.otherGoodsWNum
            }
            let dataoption = {
              params: {
                Data: JSON.stringify(data),
                PlaceLayoutDeviedData: JSON.stringify(this.disinfect),
                UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
  
              }
            }
            //调取接口
            PlaceLayoutUpdate(dataoption).then((res) => {
              if (res.success === true) {
                this.$message.success('保存成功');
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            }).catch(function() {
              this.$message.error('网络异常。');
            })
          } else {
            this.$message.error('带*号为必填项，请确认填写格式正确');
          }
        })
      }
    },
    created() {
      this.getunid();
      this.getData();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .uploadbox,
  .equipmentbox {
    position: relative;
    margin: 20px 0px;
    i {
      padding-left: 10px;
    }
  }
  
  .img-btnbox {
    position: absolute;
    right: 10px;
    top: -5px;
    width: 25px;
    height: 25px;
    overflow: hidden;
  }
  
  .showclick {
    position: relative;
    cursor: pointer;
    color: #888;
    background: url("../../../img/add.png") no-repeat;
    background-size: contain;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    input {
      opacity: 0;
      filter: alpha(opacity=0);
      cursor: pointer;
      width: 35px;
      height: 100%;
    }
  }
  
  .el-radio__label {
    margin-top: 2px;
  }
  
  .disabled {
    display: none
  }
  
  //重构
  .items-text {
    p {
      margin: 0em !important;
      padding: 0em !important;
      line-height: 20px;
    }
  }
  
  em {
    width: 5px;
    display: -webkit-inline-box;
  }
  
  .files {
    overflow: hidden;
    li {
      display: flex;
      span {
        font-size: 0.95rem;
        color: #333;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        line-height: 35px
      }
      input {
        height: 35px;
        border: none;
        background: #efefef;
        margin-bottom: 5px;
        -webkit-box-flex: 5;
        -ms-flex: 5;
        flex: 5;
      }
    }
    padding: 10px;
  }
</style>
